<template>
    <div class="app-container">
      <!--地图div-->
      <div style="position:absolute;top:0px;left:0px;width:100%;height:100%;">
        <PopulationMap
            :queryMapBool="queryMapBool"
            :mapExtent="mapExtent"
            @showQueryMapDraw="showQueryMapDraw"
        ></PopulationMap>
      </div>
      <!--index页面div-->
      <div id="populationMapDiv" class="ol-popup">
        <el-button type="primary" @click="handleAssess" style="margin:20px 20px 20px 48px;">评估</el-button><br/>
        <el-button type="primary" @click="handleResult" style="margin-left:20px;">结果查看</el-button>
        <!-- 结果查看 -->
        <div class="showResult" v-if="openResult">
            <el-table :data="resultList" height="400">
                <el-table-column label="编号" align="center" prop="number" />
                <el-table-column label="业务人员" align="center" prop="people" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button type="text" @click="handleExport(scope.row.id)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="showAssess" v-if="openAssess">
            <p>评估内容</p>
            <el-radio-group v-model="content">
                <el-radio label="0">人口分布</el-radio>
                <!--zyt修改-->
                <el-radio label="1" @click="clearQueryMapClick">人员伤亡及紧急安置</el-radio>
            </el-radio-group>
            <p>设定评估范围
                <el-radio-group v-model="view" style="margin-left:20px">
                    <!--zyt修改-->
                    <el-radio label="手动选择" @click="clearQueryMapClick">手动选择</el-radio>
                    <el-radio v-if="content === '0'" label="地图圈选" @click="queryMapClick">地图圈选</el-radio>
                </el-radio-group>
            </p>
            <template v-if="view == '手动选择'">
                <!-- <el-transfer :titles="['行政区划', '选中区划']" :button-texts="['删除', '添加']" v-model="value" :data="cityData"
                    @right-check-change="rightCheckChange" /> -->

                <template v-if="type == 1">
                    <el-cascader ref="departmentTree" :options="options" :props="props" collapse-tags clearable
                        collapse-tags-tooltip @change="departmentChange" />
                </template>
                <template v-else-if="type == 2">
                    <el-cascader ref="departmentTree" :options="options1" :props="props1" collapse-tags clearable
                        collapse-tags-tooltip @change="departmentChange" />
                </template>
            </template>

            <div class="footer">
                <el-button type="primary" @click="openAssess = false">取消</el-button>
                <!--zyt修改-->
                <el-button type="primary" @click="setParameter"
                           :disabled="(view == '手动选择' && selectValue.length == 0) || (view == '地图圈选' && queryMapDrawResult.leftX==null)"
                >设定参数</el-button>
            </div>
        </div>

        <!-- 设定参数 -->
        <el-dialog v-model="openParameter" width="700px" title="设定参数" @close="closeParameter" @open="initAssess" append-to-body>
            <p></p>
            <el-form ref="assessRef" :model="queryParams" :rules="rules" label-width="80px">
                <template v-if="content == '1'">
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="地震烈度" prop="dushu">
                                <el-radio-group v-model="queryParams.dushu">
                                    <el-radio label="VI度">VI度</el-radio>
                                    <el-radio label="VII度">VII度</el-radio>
                                    <el-radio label="VIII度">VIII度</el-radio>
                                    <el-radio label="IX度">IX度</el-radio>
                                    <el-radio label="X度">X度</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <p style="color:red;margin: 7px 0;cursor: pointer;" @click="handleExplain">公式说明</p>
                        </el-col>
                        <el-col>
                            <el-form-item label="城镇住宅" prop="czzzDataVersion" label-width="150px">
                                <SelectVersion v-model="queryParams.czzzDataVersion" title="城镇住宅" :list="selectValueId"
                                    num="czzz" name="czzzDataVersion" @getSelecVersion="getSelecVersion">
                                </SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="城镇非住宅" prop="czfzzDataVersion" label-width="150px">
                                <SelectVersion v-model="queryParams.czfzzDataVersion" title="城镇非住宅" :list="selectValueId"
                                    num="czfzz" name="czfzzDataVersion" @getSelecVersion="getSelecVersion"></SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="农村住宅(独立住宅)" prop="nczzdlzzDataVersion" label-width="150px">
                                <SelectVersion v-model="queryParams.nczzdlzzDataVersion" title="农村住宅(独立住宅)"
                                    :list="selectValueId" num="nczzdlzz" name="nczzdlzzDataVersion"
                                    @getSelecVersion="getSelecVersion"></SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="农村住宅(集合住宅)" prop="nczzjhzzDataVersion" label-width="150px">
                                <SelectVersion v-model="queryParams.nczzjhzzDataVersion" title="农村住宅(集合住宅)"
                                    :list="selectValueId" num="nczzjhzz" name="nczzjhzzDataVersion"
                                    @getSelecVersion="getSelecVersion"></SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="农村非住宅" prop="ncfzzDataVersion" label-width="150px">
                                <SelectVersion v-model="queryParams.ncfzzDataVersion" title="农村非住宅" :list="selectValueId"
                                    num="ncfzz" name="ncfzzDataVersion" @getSelecVersion="getSelecVersion"></SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="人口普查数据" prop="rkpcDataVersion" label-width="150px">
                                <SelectVersion v-model="queryParams.rkpcDataVersion" :list="selectValueId" title="人口普查数据"
                                    num="rktjb" name="rkpcDataVersion" @getSelecVersion="getSelecVersion">
                                </SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-col class="tab-title padding">建筑物破坏评估模型</el-col>
                        </el-col>
                        <el-col :offset="6">
                            <span style="font-size: 16px;font-weight: bold;font-style: italic;">F(I) = ∑<sub>n</sub>
                                ∑<sub>s</sub> ∑<sub>j</sub> P [<span
                                    style="position: relative;top: -15px;left: 10px;">D<sub>j</sub></span><span
                                    style="position: relative;left: -3px;">—</span><span
                                    style="position: relative;top: 12px;left: -14px;">I</span>] * B<sub>s</sub>
                            </span><br /><br />
                        </el-col>
                        <el-col :offset="4" style="margin-bottom:20px">
                            <span class="indent">式中：</span><br />
                            <span class="indent">I --表示地震烈度；</span><br />
                            <span class="indent">N --表示烈度圈I内的单元数据（公里格网）；</span><br />
                            <span class="indent">F(I) --表示在烈度I内，各类建筑的每类破坏面积之和；</span><br />
                            <span class="indent">P[Dj/I] --表示s类建筑在烈度I，j类破坏比率；</span><br />
                            <span class="indent">Bs --表示I烈度，每个单元中s类建筑的面积。</span><br />
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="破坏比率">
                                <el-table stripe :data="selectValue" style="width: 100%;">
                                    <el-table-column prop="province" align="center" label="省" show-overflow-tooltip />
                                    <el-table-column prop="city" align="center" label="市" show-overflow-tooltip />
                                    <el-table-column prop="prefecture" align="center" label="区县" show-overflow-tooltip />
                                    <el-table-column label="破坏比率" align="center" class-name="small-padding fixed-width"
                                        width="200">
                                        <template #default="scope">
                                            <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-col class="tab-title padding">根据损坏比计算死亡比</el-col>
                            <!-- <span class="indent"><b>2、根据损坏比计算死亡比</b></span><br /> -->
                        </el-col>
                        <el-col :offset="5">
                            <span style="font-size: 16px;font-weight: bold;font-style: italic;">log RD =
                                <el-form-item prop="done" label-width="0" style="display: inline-block;">
                                    <el-input v-model="queryParams.done" placeholder="保留三位小数" style="width:110px" />
                                </el-form-item>
                                A<sup>0.1</sup> -
                                <el-form-item prop="eone" label-width="0" style="display: inline-block;">
                                    <el-input v-model="queryParams.eone" placeholder="保留两位小数" style="width:110px" />
                                </el-form-item>
                            </span><br /><br />
                        </el-col>
                        <el-col>
                            <span class="indent">RD为死亡比；A为房屋毁坏比（房屋毁坏面积/房屋总面积即F(I)/BS）其中参数D1取12.479，E1取13.3。</span><br />
                        </el-col>
                        <el-col>
                            <el-col class="tab-title padding">计算死亡人数</el-col>
                            <!-- <span class="indent"><b>3、计算死亡人数</b></span><br /> -->
                        </el-col>
                        <el-col :offset="6">
                            <span style="font-size: 16px;font-weight: bold;font-style: italic;">D = <span
                                    style="font-size:35px;font-weight: 100;">∑</span><sub
                                    style="position: relative;left: -14px;top: 15px;">i</sub> ( RD<sub>i</sub>
                                *
                                <el-form-item prop="si" label-width="0" style="display: inline-block;">
                                    <el-input v-model="queryParams.si" placeholder="正数(0,10]" style="width:100px" />
                                </el-form-item>
                                * P<sub>t</sub> )
                            </span><br /><br />
                        </el-col>
                        <el-col>
                            <span class="indent">D为评估区死亡人数，为公里格网在i烈度下的死亡率，Si
                                为人口变化特征修正值（系数）（区间范围（0,10]），计算死亡人数时，考虑灾区人口时空变化特征作为修正，主要考虑外出务工比例及外出和回家规律、景点旺季游客规模和淡季游客规模等关键因素。Pt为每个公里格网的总人数。</span><br />
                        </el-col>
                        <el-col>
                            <el-col class="tab-title padding">计算受伤人数</el-col>
                            <!-- <span class="indent"><b>4、计算受伤人数</b></span><br /> -->
                        </el-col>
                        <el-col :offset="8">
                            <span style="font-size: 16px;font-weight: bold;font-style: italic;">F = D *
                                <el-form-item prop="cc" label-width="0" style="display: inline-block;">
                                    <el-input v-model="queryParams.cc" placeholder="整数[3,5]" style="width:100px" />
                                </el-form-item>
                            </span><br /><br />
                        </el-col>
                        <el-col>
                            <span class="indent"
                                style="display: inline-block;margin-bottom:20px!important">F为受伤人数，C为受伤人数与死亡人数的比例，一般为3到5倍。</span><br />
                        </el-col>
                    </el-row>
                </template>
                <template v-else>
                    <el-row>
                        <el-col :span="14">
                            <el-form-item label="人口普查数据" prop="rkpcDataVersion" label-width="120px">
                                <SelectVersion v-model="queryParams.rkpcDataVersion" :list="selectValueId" title="人口普查数据"
                                    num="rktjb" name="rkpcDataVersion" @getSelecVersion="getSelecVersion">
                                </SelectVersion>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="图件模板" prop="tjmb" label-width="120px">
                                <el-select v-model="queryParams.tjmb" placeholder="请选择" style="width: 100%">
                                    <el-option v-for="item in typeNameOption" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="制图单位" prop="ztdw" label-width="120px">
                                <el-input v-model="queryParams.ztdw" placeholder="请输入制图单位" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="图件标题" prop="tjbt" label-width="120px">
                                <el-input v-model="queryParams.tjbt" placeholder="请输入图件标题"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="closeParameter">退出</el-button>
                    <el-button type="primary" @click="toAssess">评估</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 公式说明 -->
        <el-dialog v-model="openExplain" width="650px" title="人员伤亡评估模型" append-to-body>
            <p></p>
            <el-row>
                <el-col class="tab-title">人员伤亡评估模型</el-col>
                <el-col>
                    <span
                        class="indent">人员伤亡主要由建筑物破坏造成，首先通过建筑物破坏评估模型，根据公里格网建筑面积、建筑物易损性矩阵、人口和建筑物概况等计算在不同地震烈度，各类建筑的每类破坏面积之和；其次通过损坏比公式计算死亡比，通过死亡人数公式得到死亡人数；最后死亡人数与受伤人数比例计算受伤人数。</span><br />
                </el-col>
                <el-col>
                    <el-col class="tab-title padding">1、建筑物破坏评估模型</el-col>
                    <!-- <span class="indent"><b>1、建筑物破坏评估模型</b></span><br /> -->
                </el-col>
                <el-col :offset="6">
                    <span style="font-size: 16px;font-weight: bold;font-style: italic;">F(I) = ∑<sub>n</sub>
                        ∑<sub>s</sub> ∑<sub>j</sub> P [<span
                            style="position: relative;top: -15px;left: 10px;">D<sub>j</sub></span><span
                            style="position: relative;left: -3px;">—</span><span
                            style="position: relative;top: 12px;left: -14px;">I</span>] * B<sub>s</sub>
                    </span><br /><br />
                </el-col>
                <el-col>
                    <span class="indent">式中：</span><br />
                    <span class="indent">I --表示地震烈度；</span><br />
                    <span class="indent">N --表示烈度圈I内的单元数据（公里格网）；</span><br />
                    <span class="indent">F(I) --表示在烈度I内，各类建筑的每类破坏面积之和；</span><br />
                    <span class="indent">P[Dj/I] --表示s类建筑在烈度I，j类破坏比率；</span><br />
                    <span class="indent">Bs --表示I烈度，每个单元中s类建筑的面积。</span><br />
                </el-col>
                <el-col>
                    <el-col class="tab-title padding">2、根据损坏比计算死亡比</el-col>
                    <!-- <span class="indent"><b>2、根据损坏比计算死亡比</b></span><br /> -->
                </el-col>
                <el-col :offset="6">
                    <span style="font-size: 16px;font-weight: bold;font-style: italic;">log RD = D<sub>1</sub>
                        A<sup>0.1</sup> - E<sub>1</sub></span><br /><br />
                </el-col>
                <el-col>
                    <span class="indent">RD为死亡比；A为房屋毁坏比（房屋毁坏面积/房屋总面积即F(I)/BS）其中参数D1取12.479，E1取13.3。</span><br />
                </el-col>
                <el-col>
                    <el-col class="tab-title padding">3、计算死亡人数</el-col>
                    <!-- <span class="indent"><b>3、计算死亡人数</b></span><br /> -->
                </el-col>
                <el-col :offset="6">
                    <span style="font-size: 16px;font-weight: bold;font-style: italic;">D = <span
                            style="font-size:35px;font-weight: 100;">∑</span><sub
                            style="position: relative;left: -14px;top: 15px;">i</sub> ( RD<sub>i</sub>
                        * S<sub>i</sub> * P<sub>t</sub> )</span><br /><br />
                </el-col>
                <el-col>
                    <span class="indent">D为评估区死亡人数，为公里格网在i烈度下的死亡率，Si
                        为人口变化特征修正值（系数）（区间范围（0,10]），计算死亡人数时，考虑灾区人口时空变化特征作为修正，主要考虑外出务工比例及外出和回家规律、景点旺季游客规模和淡季游客规模等关键因素。Pt为每个公里格网的总人数。</span><br />
                </el-col>
                <el-col>
                    <el-col class="tab-title padding">4、计算受伤人数</el-col>
                    <!-- <span class="indent"><b>4、计算受伤人数</b></span><br /> -->
                </el-col>
                <el-col :offset="6">
                    <span style="font-size: 16px;font-weight: bold;font-style: italic;">F = D * C</span><br /><br />
                </el-col>
                <el-col>
                    <span class="indent">F为受伤人数，C为受伤人数与死亡人数的比例，一般为3到5倍。</span><br />
                    <span
                        class="indent">各省人员可以根据各省实际情况，调整损坏比计算死亡比公式中的系数D1、E1，调整计算死亡人数人口变化特征修正值Si，受伤人数与死亡人数的比例C。</span><br />
                    <span class="indent">F为受伤人数，C为受伤人数与死亡人数的比例，一般为3到5倍。</span><br />
                </el-col>
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="openExplain = false">退出</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 结果查看 -->
        <el-dialog v-model="resultView" width="800px" title="结果查看" @open="resultViewOpen" :close-on-click-modal="false" append-to-body>
            <p></p>
            <template v-if="content == '1'">
                <el-table :data="resultTable">
                    <el-table-column prop="province" label="省" align="center" />
                    <el-table-column prop="city" label="市" align="center" />
                    <el-table-column prop="prefecture" label="区县" align="center" />
                    <el-table-column label="预估受伤人数" align="center">
                        <el-table-column prop="injuryNum" label="计算值" align="center" />
                        <el-table-column prop="injuryXznum" label="修正值" align="center">
                            <template #default="{ row }">
                                <el-input v-model.number="row.injuryXznum"></el-input>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="预估死亡人数" align="center">
                        <el-table-column prop="deathNum" label="计算值" align="center" />
                        <el-table-column prop="deathXznum" label="修正值" align="center">
                            <template #default="{ row }">
                                <el-input v-model.number="row.deathXznum"></el-input>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="预估需紧急安置人数" align="center">
                        <el-table-column prop="resettle" label="计算值" align="center" />
                        <el-table-column prop="resettleXz" label="修正值" align="center">
                            <template #default="{ row }">
                                <el-input v-model.number="row.resettleXz"></el-input>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-divider border-style="dashed"></el-divider>
                <el-form ref="resultRef" :model="resultForm" :rules="resultFormRules" label-width="150px">
                    <el-row>
                        <el-col>
                            <el-form-item label="图件模板" label-width="80px"></el-form-item>
                        </el-col>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="人员伤亡" prop="ryswTemplate">
                                <el-select v-model="resultForm.ryswTemplate" placeholder="请选择人员伤亡模板" style="width: 100%">
                                    <el-option v-for="item in casualtiesOptions" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="图件标题" prop="tjbt">
                                <el-input v-model="resultForm.tjbt" placeholder="请输入图件标签"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="地震灾害风险等级" prop="dzzhTemplate">
                                <el-select v-model="resultForm.dzzhTemplate" placeholder="请选择地震灾害风险等级" style="width: 100%">
                                    <el-option v-for="item in fxdjOptions" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="1" :span="23">
                            <el-form-item label="图件标题" prop="tjbtt">
                                <el-input v-model="resultForm.tjbtt" placeholder="请输入图件标签"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="制图单位" prop="ztdw" label-width="80px">
                                <el-input v-model="resultForm.ztdw" placeholder="请输入制图单位"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
            <template v-else-if="content == '0'">
                <el-form ref="resultRef" :model="resultForm" :rules="resultFormRules">
                    <el-form-item>
                        <!-- <img :src="`${baseUrl}${resultForm.scFileId}`" style="width:100%" /> -->
                        <ImagePreview :src="`/attachment/downLoad?attachId=${resultForm.scFileId}`"></ImagePreview>
                    </el-form-item>
                    <el-form-item v-if="resultFormRadio != '1'" label="标题" prop="scFileTitle">
                        <el-input v-model="resultForm.scFileTitle" placeholder="请输入图片标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="resultFormRadio" class="ml-4" @change="resultChange">
                            <el-radio label="0">保存结果</el-radio>
                            <el-radio label="1">重新设定参数</el-radio>
                            <el-radio label="2">更换图件模板</el-radio>
                        </el-radio-group>
                        <el-form-item prop="tjmb" v-if="resultFormRadio == '2'">
                            <el-select v-model="resultForm.tjmb" style="margin-left: 10px">
                                <el-option v-for="item in typeNameOption" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                </el-form>
            </template>

            <template #footer>
                <div class="dialog-footer" v-if="content == '1'">
                    <el-button type="primary" @click="resultView = false; proxy.resetForm('resultRef')">退出</el-button>
                    <el-button type="primary" @click="onlySave">仅保存结果</el-button>
                    <el-button type="primary" @click="plot('')">保存&出图</el-button>
                </div>
                <div class="dialog-footer" v-else-if="content == '0'">
                    <el-button type="primary" @click="submitResult">确定</el-button>
                    <el-button @click="resultView = false">取消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 结果查看-人员伤亡及紧急安置-出图 -->
        <el-dialog v-model="plotOpen" width="800px" title="结果查看" :close-on-click-modal="false" @open="plotInit" append-to-body>
            <p></p>
            <el-form ref="resultPlotRef" :model="resultForm" :rules="resultFormRules">
                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane v-for="item in plotTabs" :key="item.id" :label="item.label" :name="item.id">
                        <el-form-item>
                            <!-- <img :src="`${baseUrl}${resultForm.ryswId}`" style="width:100%" v-if="activeName == '0'" />
                            <img :src="`${baseUrl}${resultForm.fxdjId}`" style="width:100%" v-else-if="activeName == '1'" /> -->
                            <ImagePreview :src="`/attachment/downLoad?attachId=${resultForm.ryswId}`"
                                v-if="activeName == '0'"></ImagePreview>
                            <ImagePreview :src="`/attachment/downLoad?attachId=${resultForm.fxdjId}`"
                                v-else-if="activeName == '1'"></ImagePreview>
                            <el-table stripe :data="resultForm.newList" style="width: 100%;" v-else-if="activeName == '2'">
                                <el-table-column prop="province" align="center" label="省" show-overflow-tooltip />
                                <el-table-column prop="city" align="center" label="市" show-overflow-tooltip />
                                <el-table-column prop="prefecture" align="center" label="区县" show-overflow-tooltip />
                                <el-table-column prop="resettleXz" align="center" label="预估所需紧急安置人数"></el-table-column>
                            </el-table>
                        </el-form-item>
                        <el-form-item label="标题" prop="udTitle" v-if="resultFormRadio == '0'">
                            <el-input v-model="resultForm.udTitle" placeholder="请输入图片标题"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-radio-group v-model="resultFormRadio" class="ml-4" @change="resultFormRadioChange">
                                <el-radio label="0">保存结果</el-radio>
                                <el-radio label="1">重新设定参数</el-radio>
                                <el-radio label="2" v-if="activeName != '2'">更换图件模板</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="人员伤亡" prop="ryswTemplate" v-if="resultFormRadio == '2'">
                            <el-select v-model="resultForm.ryswTemplate" placeholder="请选择人员伤亡模板" style="width: 100%">
                                <el-option v-for="item in casualtiesOptions" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地震灾害风险等级" prop="dzzhTemplate" v-if="resultFormRadio == '2'">
                            <el-select v-model="resultForm.dzzhTemplate" placeholder="请选择地震灾害风险等级" style="width: 100%">
                                <el-option v-for="item in fxdjOptions" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitPlot">确定</el-button>
                    <el-button @click="plotOpen = false; proxy.resetForm('resultPlotRef')">取消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 进度条 -->
        <el-dialog v-model="progressOpen" title="正在评估" width="400px" :close-on-click-modal="false" append-to-body
            :show-close="false">
            <p></p>
            <div class="demo-progress">
                <el-progress :percentage="percentages" />
            </div>
            <p>正在请求权限......</p>
            <template #footer>
                <div class="footer">
                    <el-button plain @click="cancel">取消评估</el-button>
                </div>
            </template>
        </el-dialog>
      </div>
    </div>
</template>

<script setup name="populationMap">
//地图
import PopulationMap from '@/map/assess/population/map.vue';
import { getImport,getExtentByIaId } from "@/api/business/activities";
import { getProvince, getChildArea } from "@/api/system/division";
import { getTypeNameByType, populationDistribution, alg, HumanCasualtiesAndPlacement, saveUrgencysettleDataByPG } from '@/api/assess/map/population'
import { uploadPopulation,titleCheck } from '@/api/assess/population'
import { titleCheck1 } from "@/api/assess/urgency";
import { ElMessageBox, ElLoading } from 'element-plus'
import SelectVersion from "@/components/SelectVersion"
import useAssessStore from '@/store/modules/assess'
import { storeToRefs } from 'pinia'
import { saveResult,resultLists } from "@/api/assess/map/house"
import { watch } from 'vue';

const assessStore = useAssessStore()
let { assessId } = storeToRefs(assessStore)
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const openExplain = ref(false);
const openAssess = ref(false);
const openParameter = ref(false);
const content = ref('0');
const view = ref('手动选择')
const province = ref();
const value = ref([]);
const selectValue = ref([]);
const titleName = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入标题'))
  }else if (value) {
    const parmas = { scRelation: route.query.id, scFileTitle: value ,scAssContent:'人员伤亡分布图'}
    titleCheck(parmas).then(res => {
      if (!res.data) {
        callback()
      } else {
        callback(new Error("该标题已存在，请重新输入"))
      }
    }).catch(_ => {
      callback(new Error(_.message))
    })
  }
}

const titleName1 = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入标题'))
  } else if (value) {
    const parmas = { udRelation: route.query.id, udTitle: value ,udContent:'需紧急安置人员'}
    titleCheck1(parmas).then(res => {
      if (!res.data) {
        callback()
      } else {
        callback(new Error("该标题已存在，请重新输入"))
      }
    }).catch(_ => {
      callback(new Error(_.message))
    })
  }
}
const resultData = reactive({
    resultView: false,
    resultTable: [],
    resultForm: {},
    resultFormRadio: '0',
    resultFormRules: {
        // 结果查看-1
        ryswTemplate: [{ required: true, message: '请选择人员伤亡模板！', trigger: 'change' }],
        dzzhTemplate: [{ required: true, message: '请选择地震灾害风险等级！', trigger: 'change' }],
        ztdw: [{ required: true, message: '请输入制图单位！', trigger: 'blur' }],
        tjbt: [{ required: true, message: '请输入图件标题！', trigger: 'blur' }],
        tjbtt: [{ required: true, message: '请输入图件标题！', trigger: 'blur' }],
        // 结果查看-0
        scFileTitle: [{ required: true, validator: titleName, trigger: 'blur' }],
        tjmb: [{ required: true, message: '请选择更换图件模板！', trigger: 'blur' }],
        // 结果查看-1-确定
        udTitle: [{ required: true, validator: titleName1, trigger: 'blur' }]
    },
    casualtiesOptions: [],
    fxdjOptions: [],
})
const { resultView, resultTable, resultForm, resultFormRadio, resultFormRules, casualtiesOptions, fxdjOptions } = toRefs(resultData)
// city
const provinceId = ref();
const city = ref();
const cityId = ref();
const counties = ref();
const countiesId = ref();
const areaData = ref()
const iaId = ref()
const selectValueId = ref([]);
const type = ref(1);
const options1 = ref({});
const props1 = ref({ multiple: true });
const options = ref({});
const props = ref({
    multiple: true,
    lazy: true,
    lazyLoad(node, resolve) {
        const { level } = node
        if (level === 0) {  // 第一级加载省份
            getChildArea(node.data.value).then(res => {
                if (res.code === 200) {
                    const nodes = res.data.map(item => {
                        return {
                            label: item.name,
                            value: item.id,
                            leaf: false
                        }
                    })
                    resolve(nodes)
                }
            })
        } else if (level === 1) {  //  第二级加载城市
            getChildArea(node.data.value)
                .then(res => {
                    if (res.code === 200) {
                        const nodes = res.data.map(item => {
                            return {
                                label: item.name,
                                value: item.id,
                                leaf: false
                            }
                        })
                        resolve(nodes)
                    }
                })
        } else {
            getChildArea(node.data.value)
                .then(res => {
                    if (res.code === 200) {
                        const nodes = res.data.map(item => {
                            return {
                                label: item.name,
                                value: item.id,
                                leaf: true
                            }
                        })
                        resolve(nodes)
                    }
                })
        }
    }
});
// 进度条
const progressOpen = ref(false)
const percentages = ref(0)
let cancelFunc = {}


const typeNameOption = ref([])

// 保留三位小数
const positive3decimals = (rule, value, callback) => {
    value = String(value)
    if (isNaN(value) || !value) {
        return callback(new Error());
    }
    var re = /^([0-9]+[\d]*(.[0-9]{3}))$/;
    if (!re.test(value)) {
        callback(new Error());
    } else {
        callback();
    }
}

// 保留两位小数
const positive2decimals = (rule, value, callback) => {
    value = String(value)
    if (isNaN(value) || !value) {
        return callback(new Error());
    }
    var re = /^([0-9]+[\d]*(.[0-9]{2}))$/;
    if (!re.test(value)) {
        callback(new Error());
    } else {
        callback();
    }
}

// (0,10]整数
const positive0_10integer = (rule, value, callback) => {
    value = String(value)
    if (isNaN(value) || !value) {
        return callback(new Error());
    }
    var re = /^([1-9]|10)$/;
    if (!re.test(value)) {
        callback(new Error());
    } else {
        callback();
    }
}

// [3,5]整数
const positive3_5integer = (rule, value, callback) => {
    value = String(value)
    if (isNaN(value) || !value) {
        return callback(new Error());
    }
    var re = /^([3-5])$/;
    if (!re.test(value)) {
        callback(new Error());
    } else {
        callback();
    }
}
const data = reactive({
    queryParams: {
        dushu: 'VI度',
        rkpcDataVersion: '',
        tjmb: '',
        humanCasualties: '',
        earthquakeHazard: '',
        done: '',
        eone: '',
        si: '',
        cc: '',
        ztdw: '',
        tjbt:'',
    },
    rules: {
        dushu: [{ required: true }],
        czzzDataVersion: [{ required: true, message: "城镇住宅数据不能为空", trigger: "change" }],
        czfzzDataVersion: [{ required: true, message: "城镇非住宅数据不能为空", trigger: "change" }],
        nczzdlzzDataVersion: [{ required: true, message: "农村住宅（独立住宅）数据不能为空", trigger: "change" }],
        nczzjhzzDataVersion: [{ required: true, message: "农村住宅（集体住宅）数据不能为空", trigger: "change" }],
        ncfzzDataVersion: [{ required: true, message: "农村非住宅数据不能为空", trigger: "change" }],
        rkpcDataVersion: [{ required: true, message: "人口普查数据不能为空", trigger: "change" }],
        done: [{ required: true, message: "保留三位小数", trigger: "blur", validator: positive3decimals }],
        eone: [{ required: true, message: "保留两位小数", trigger: "blur", validator: positive2decimals }],
        si: [{ required: true, message: "整数(0,10]", trigger: "blur", validator: positive0_10integer }],
        cc: [{ required: true, message: "整数[3,5]", trigger: "blur", validator: positive3_5integer }],
        // 人口分布
        tjmb: [{ required: true, message: "图件模板不能为空", trigger: "change" }],
        humanCasualties: [{ required: true, message: "人口伤亡模板不能为空", trigger: "change" }],
        earthquakeHazard: [{ required: true, message: "地震灾害风险等级模板不能为空", trigger: "change" }],
        ztdw: [{ required: true, message: "制图单位不能为空", trigger: "blur" }],
        tjbt: [{ required: true, message: "图件标题不能为空", trigger: "blur" }],
    }
})
const { queryParams, rules } = toRefs(data)
// 结果查看按钮
const openResult = ref(false);
const resultList = ref([])
function handleResult(){
    openAssess.value = false;
    openResult.value = !openResult.value;
    if(openResult.value){
        getResultList('2')
    }
}
function getResultList(result){
    resultLists({result,iaId:route.query.id}).then(res=>{
        resultList.value = res.data?res.data:[];
    }).catch(err=>{resultList.value=[]})
}
// 导出
function handleExport(id){
    proxy.download(`/assessplot/evaluationResults/export/${id}`, {}, `人口伤亡和需紧急安置人员结果.xls`)
}
function handleAssess() {
    openResult.value = false;
    openAssess.value = !openAssess.value;
    content.value = '0'
}
// 设定参数
function setParameter() {
    openAssess.value = false;
    openParameter.value = true;
    proxy.resetForm("assessRef");
}
// 人口分布-设定参数初始化-图件模板
function initAssess() {
    if (content.value == '0') {
        getTypeName()
    }
}
function getTypeName() {
    getTypeNameByType(4).then(res => {
        typeNameOption.value = res.data || []
    })
}
// 关闭设定参数
function closeParameter() {
    value.value = []
    openParameter.value = false
    queryParams.value = {}
}

function handleExplain() {
    openExplain.value = true;
};
function handleEdit(row) {// 修改
    router.push({
        path: '/assess/destructionRatio',
        query: row,
    })
}
function getSelecVersion(obj) {
    queryParams.value[obj.name] = obj.code;
    proxy.$refs['assessRef'].clearValidate(obj.name)
}
// 设定参数-评估
const dataMessage = ref('')
function toAssess(tjmbNew) {
    if (typeof cancelFunc.c === "function") {
        cancelFunc.c('取消成功')
    }
    if (content.value == '0') {
        proxy.$refs["assessRef"].validate(valid => {
            if (valid) {
                openParameter.value = false
                const { rkpcDataVersion, tjmb, ztdw , tjbt } = queryParams.value
                let tjmbId = tjmb
                if (tjmbNew && typeof tjmbNew == 'string') {
                    tjmbId = tjmbNew
                }
                startProgress()
                let startTime = new Date().getTime()
                populationDistribution({ list: selectValueId.value, rkpcDataVersion, tjmb: tjmbId, ztdw, iaId: iaId.value, circleVO:queryMapDrawResult.value,tjbt:tjbt }, cancelFunc).then(res => {
                    if(res.code == 200){
                        resultForm.value.scFileId = res.data.attach.attachId
                        resultForm.value.scAssContent = res.data.count
                        resultForm.value.scRelation = iaId.value
                        let nowTime = new Date().getTime()
                        let delayTime = 1000
                        if (nowTime - startTime < delayTime) {
                            setTimeout(() => {
                                progressTip()
                            }, delayTime)
                            return
                        }
                        progressTip()
                    }
                }).catch(err => {
                    // if(typeof tjmbNew == 'string') {
                    //     resultFormRadio.value = '2'
                    // }
                    progressOpen.value = false
                    if (err.message !== '取消成功') {
                        cancelFunc.c = null
                    }
                })
            }
        });
    } else if (content.value == '1') {
        proxy.$refs["assessRef"].validate((valid, field) => {
            if (valid) {
                const assessLoading = ElLoading.service({
                    lock: true,
                    text: '评估中...',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                dataMessage.value = `城镇住宅数据版本为：${queryParams.value.czzzDataVersion}<br/>
                城镇非住宅数据版本为：${queryParams.value.czfzzDataVersion}<br/>
                农村住宅(独立住宅)数据版本为：${queryParams.value.nczzdlzzDataVersion}<br/>
                农村住宅(集合住宅)数据版本为：${queryParams.value.nczzjhzzDataVersion}<br/>
                农村非住宅数据版本为：${queryParams.value.ncfzzDataVersion}<br/>
                人口普查数据数据版本为：${queryParams.value.rkpcDataVersion}`
                
                const { done, eone, si, cc, czzzDataVersion, czfzzDataVersion, nczzdlzzDataVersion, nczzjtzzDataVersion, ncfzzDataVersion, rkpcDataVersion } = queryParams.value
                let data = { list: selectValueId.value, iaId: iaId.value, done, eone, si, cc, czzzDataVersion, czfzzDataVersion, nczzdlzzDataVersion, nczzjtzzDataVersion, ncfzzDataVersion, rkpcDataVersion }
                alg(data).then(res => {
                    if (res.code == 200) {
                        assessLoading.close()
                        openParameter.value = false
                        proxy.resetForm('assessRef')
                        closeParameter()
                        resultView.value = true
                        resultTable.value = res.data
                    }
                })
            }
        })

    }
}

// 进度条
let startTime = null
const startProgress = () => {
    percentages.value = 0
    progressOpen.value = true
    startTime = setInterval(() => {
        if (percentages.value < 50) {
            percentages.value += 5;
        }
        if (percentages.value == 50) {
            clearInterval(startTime);
            let conductTime = setInterval(() => {
                if (percentages.value == 95) {
                    clearInterval(conductTime);
                }
                if (percentages.value < 96) {
                    percentages.value += 2;
                }
            }, 100)
        }
    }, 100)
}
// 进度条-取消评估
const cancel = () => {
    if (typeof cancelFunc.c === "function") {
        cancelFunc.c('取消成功')
    }
    if (content.value == '0') {
        openParameter.value = true
    } else if (content.value == '1') {
        resultView.value = true
    }
}
// 人口分布-结果查看-评估提示
const progressTip = () => {
    percentages.value = 100
    clearInterval(startTime)
    progressOpen.value = false
    ElMessageBox({
        title: '',
        'show-close': false,
        icon: 'SuccessFilled',
        type: 'success',
        message: '评估完成，查看结果!',
        callback: function () {
            resultView.value = true
            openParameter.value = false
            resultFormRadio.value = '0'
        }
    })
}
// 人口分布-结果查看-弹框init
let tjmb = ''
function resultViewOpen() {
    if (content.value == '1') {
        getTypeNameByType('16').then(res => {
            casualtiesOptions.value = res.data
        })
        getTypeNameByType('14').then(res => {
            fxdjOptions.value = res.data
        })
    } else {
        tjmb = resultForm.value.tjmb
    }
}
const resultChange = (val) => {
    if (val == '2') {
        resultForm.value.tjmb = ''
    } else {
        resultForm.value.tjmb = tjmb
    }
}
// 人口分布-结果查看-确定
const submitResult = () => {
    if (resultFormRadio.value == '0') {
        proxy.$refs['resultRef'].validate(valid => {
            if (valid) {
                const { scAssContent, scFileId, scFileTitle, scRelation } = resultForm.value
                uploadPopulation({ scAssContent, scFileId, scFileTitle, scRelation }).then(res => {
                    if (res.code == 200) {
                        proxy.$modal.msgSuccess("上传成功");
                        resultView.value = false
                        proxy.resetForm('assessRef')
                        proxy.resetForm('resultRef')
                        console.log(res.data,'=====');
                    }
                })
            }
        })
    } else if (resultFormRadio.value == '1') {
        resultView.value = false
        openParameter.value = true
        resultFormRadio.value = '0'
    } else if (resultFormRadio.value == '2') {
        proxy.$refs['resultRef'].validate(valid => {
            if (valid) {
                resultView.value = false
                toAssess(resultForm.value.tjmb)
            }
        })
    }
}
// 人员伤亡及紧急安置-仅结果
function onlySave(){
    proxy.$modal.loading("正在保存，请稍候...");
    saveResult({id:resultTable.value[0].resultAnalysis,iaId:route.query.id,result:'2'}).then(res=>{
        proxy.$modal.closeLoading();
        resultView.value = false;
        proxy.$modal.msgSuccess('保存成功');
    })
}
// 人员伤亡及紧急安置-结果查看-评估
const plotOpen = ref(false)
const activeName = ref('0')
const plotTabs = reactive([{ label: '人员伤亡分布图', id: '0' }, { label: '地震灾害风险等级分布图', id: '1' }, { label: '需紧急安置人员', id: '2' }])
function plot(ryswTemplate, dzzhTemplate) {
    if (typeof cancelFunc.c === "function") {
        cancelFunc.c('取消成功')
    }
    proxy.$refs['resultRef'].validate(valid => {
        if (valid) {
            resultView.value = false
            startProgress()
            let startTime = new Date().getTime()
            let params = null
            if (ryswTemplate) {
                params = { list: resultTable.value, ...resultForm.value, ryswTemplate, dzzhTemplate }
            } else {
                params = { list: resultTable.value, ...resultForm.value }
            }
            HumanCasualtiesAndPlacement(params, cancelFunc).then(res => {
                resultForm.value.ryswId = res.data.rysw.attach.attachId
                resultForm.value.ryswCount = res.data.rysw.count
                resultForm.value.fxdjId = res.data.zzzhfx.attach.attachId
                resultForm.value.fxdjCount = res.data.zzzhfx.count
                resultForm.value.newList = res.data.list
                let nowTime = new Date().getTime()
                let delayTime = 1000
                if (nowTime - startTime < delayTime) {
                    setTimeout(() => {
                        progressPlotTip()
                    }, delayTime)
                    return
                }
                progressPlotTip()
            }).catch(err => {
                progressOpen.value = false
                if (err.message !== '取消成功') {
                    cancelFunc.c = null
                }
            })
        }
    })
}
// 人员伤亡及紧急安置-结果查看-评估提示
const progressPlotTip = () => {
    percentages.value = 100
    clearInterval(startTime)
    progressOpen.value = false
    ElMessageBox({
        title: '',
        'show-close': false,
        icon: 'SuccessFilled',
        type: 'success',
        message: '评估完成，查看结果!',
        callback: function () {
            plotOpen.value = true
            resultView.value = false
            resultFormRadio.value = '0'
        }
    })
}

let ryswTemplate = ''
let dzzhTemplate = ''
// 人员伤亡及紧急安置-结果查看-出图弹框init
const plotInit = () => {
    ryswTemplate = resultForm.value.ryswTemplate
    dzzhTemplate = resultForm.value.dzzhTemplate
}
const resultFormRadioChange = (val) => {
    if (val == '2') {
        resultForm.value.ryswTemplate = ''
        resultForm.value.dzzhTemplate = ''
    } else {
        resultForm.value.ryswTemplate = ryswTemplate
        resultForm.value.dzzhTemplate = dzzhTemplate
    }
}
// 切换tab
const handleClick = () => {
    resultForm.value.udTitle = '';
}
// 人员伤亡及紧急安置-结果查看-出图-确定
const submitPlot = () => {
    if (resultFormRadio.value == '0') {
        proxy.$refs['resultPlotRef'].validate(valid => {
            if (valid) {
                const { udTitle, ryswId, ryswCount, fxdjId, fxdjCount } = resultForm.value
                let params = {}
                if (activeName.value == '0') {
                    params = { scFileTitle: udTitle, scFileId: ryswId, scAssContent: ryswCount, scRelation: iaId.value, dataMessage: dataMessage.value }
                } else if (activeName.value == '1') {
                    params = { scFileTitle: udTitle, scFileId: fxdjId, scAssContent: fxdjCount, scRelation: iaId.value, dataMessage: dataMessage.value }
                } else if (activeName.value == '2') {
                    params = { udTitle, iaId: iaId.value,list:resultForm.value.newList,dataMessage: dataMessage.value }
                }
                saveUrgencysettleDataByPG(params, activeName.value,).then(res => {
                    if (res.code == 200) {
                        proxy.$modal.msgSuccess("上传成功")
                        let index = plotTabs.findIndex(item => item.id == activeName.value)
                        plotTabs.splice(index, 1)
                        if (plotTabs.length == 0) {
                            plotOpen.value = false
                            proxy.resetForm('resultPlotRef')
                            proxy.resetForm('resultRef')
                            return
                        }
                        resultForm.value.udTitle = ''
                        activeName.value = plotTabs[0].id
                        submitPlot()
                    }
                })
            }
        })
    } else if (resultFormRadio.value == '1') {
        plotOpen.value = false
        resultView.value = true
        resultFormRadio.value = '0'
    } else if (resultFormRadio.value == '2') {
        proxy.$refs['resultPlotRef'].validate(valid => {
            if (valid) {
                plotOpen.value = false
                plot(resultForm.value.ryswTemplate, resultForm.value.dzzhTemplate)
            }
        })
    }
}

// 设定评估范围获取省市县
function getCity() {
    getImport(route.query.id || assessId.value).then(res => {
        // getImport(route.query.id).then(res => {
        province.value = res.data.importantActivity.iaProvince;
        provinceId.value = res.data.importantActivity.provinceId;
        city.value = res.data.importantActivity.iaCity;
        cityId.value = res.data.importantActivity.cityId;
        counties.value = res.data.importantActivity.iaCounties;
        countiesId.value = res.data.importantActivity.countiesId;
        iaId.value = res.data.importantActivity.iaId
        if (!city.value && !counties.value) {
            type.value = 1;
            options.value = [{
                label: province.value,
                value: provinceId.value,
                leaf: false,
            }]
        }
        if (counties.value) {
            type.value = 2;
            options1.value = [{
                label: province.value,
                value: provinceId.value,
                leaf: false,
                children: [{
                    label: city.value,
                    value: cityId.value,
                    leaf: false,
                    children: [{
                        label: counties.value,
                        value: countiesId.value,
                        leaf: true
                    }]
                }]
            }]
        }
        if (city.value && !counties.value) {
            type.value = 2;
            getChildArea(cityId.value).then(response => {
                areaData.value = response.data;
                areaData.value.forEach(item => {
                    item.value = item.id;
                    item.label = item.name;
                    item.leaf = true;
                });
                options1.value = [{
                    label: province.value,
                    value: provinceId.value,
                    leaf: false,
                    children: [{
                        value: cityId.value,
                        label: city.value,
                        leaf: false,
                        children: areaData.value
                    }]
                }]
            });

        }
    })
}
// 省市县级联变化
function departmentChange() {
    let node = proxy.$refs['departmentTree'].getCheckedNodes();
    let arr = [];
    let arr1 = [];
    node.forEach(item => {
        if (item.pathLabels[2]) {
            arr.push({ province: item.pathLabels[0], city: item.pathLabels[1], prefecture: item.pathLabels[2] })
            arr1.push({
                provinceId: item.pathValues[0],
                cityId: item.pathValues[1],
                prefectureId: item.pathValues[2],
                province: item.pathLabels[0],
                city: item.pathLabels[1],
                prefecture: item.pathLabels[2]
            })
        }
    })

    selectValue.value = arr;
    selectValueId.value = arr1;
}


//地图传参--start
const queryMapBool = ref(false);//是否开启地图圈选
//地图圈选结果参数
const queryMapDrawResult = ref({
  leftX:null,
  leftY:null,
  rightX:null,
  rightY:null,
  centerX:null,
  centerY:null,
});
//地图圈选
const queryMapClick = ()=>{
  queryMapBool.value = false;//关闭地图圈选
  //清空行政区划选择
  selectValue.value = [];
  selectValueId.value = [];
  nextTick(() => {
    queryMapBool.value = true;//开启地图圈选
  });
}
//关闭地图圈选
const clearQueryMapClick = ()=>{
  queryMapBool.value = false;//关闭地图圈选
  //清空地图圈选结果参数
  queryMapDrawResult.value = {
    leftX:null,
    leftY:null,
    rightX:null,
    rightY:null,
    centerX:null,
    centerY:null,
  }
}
//地图圈选结果
const showQueryMapDraw = (array)=>{
  console.log("地图圈选结果");
  console.log(array);
  let polygonWkt = array[0];
  let extent = array[1];
  let center = array[2];
  queryMapDrawResult.value = {
    leftX:extent[0],
    leftY:extent[1],
    rightX:extent[2],
    rightY:extent[3],
    centerX:center[0],
    centerY:center[1],
  }
}

//获取活动行政区划的范围
const mapExtent = ref([]);
function getMapExtentByIaId() {
  getExtentByIaId(route.query.id || assessId.value).then(res => {
    let data = res.data;
    console.log(data);
    //BOX(113.51660441700005 37.43676435400005,115.47735626200006 38.76359765400008)
    if(data.indexOf("BOX(")!=-1){
      //mapExtent.value = [113.51660441700005, 37.43676435400005,115.47735626200006, 38.76359765400008];
      let arr = data.split("BOX(")[1].split(")")[0].split(",");
      if(arr.length==2){
        let leftBottom = arr[0].split(" ");
        let rightTop = arr[1].split(" ");
        if(leftBottom.length==2 && rightTop.length==2){
          let left = Number(leftBottom[0]);
          let bottom = Number(leftBottom[1]);
          let right = Number(rightTop[0]);
          let top = Number(rightTop[1]);
          mapExtent.value = [left,bottom,right,top];
        }
      }
    }
  });
}
getMapExtentByIaId();
//地图传参--end

onMounted(() => {
    getCity();
})

</script>

<style lang="scss" scoped>
:deep(.el-transfer__buttons) {
    padding: 0 10px;

    .el-transfer__button {
        margin: 15px 0;
        display: block;
    }

    .el-transfer__button:nth-child(2) {
        margin-left: 0px;
    }

    .el-button+.el-button {
        margin-left: 0px;
    }
}
.showResult{
    position: absolute;
    width: 510px;
    top: 72px;
    left: 106px;
    padding: 20px;
    background: rgba($color: #fff, $alpha: 0.7);//zyt修改
    border: 1px solid #000;
}

.showAssess {
    position: absolute;
    top: 20px;
    left: 107px;
    width: 536px;
    padding: 20px;
    background: rgba($color: #fff, $alpha: 0.7);//zyt修改
    border: 1px solid #000;

    p {
        font-weight: bold;
    }
}

.footer {
    text-align: center;
    margin-top: 20px;
}

.tab-title {
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #0D9AFF;
    font-family: PingFangSC-Medium;
    padding-left: 10px;
    margin-bottom: 20px;
}

.padding {
    margin: 20px 0;
}

:deep(.el-table) {
    .el-table__expand-column {
        .cell {
            display: none;
        }
    }
}
</style>